<template>
  <div class = "">
    <!--  //头部-->
    <el-form
        :inline="true"
        :model="selectByForm"
        class="advanced-form"
        label-position="right"
    >
      <el-row :gutter="20" class="form-row">
        <!-- 第一行 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="土地" class="form-item">
            <el-input
                v-model="selectByForm.used"
                placeholder="请输入土地目前的作用"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="项目" class="form-item">
            <el-input
                v-model="selectByForm.itemName"
                placeholder="请输入项目名称"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="总价" class="form-item">
            <el-input
                v-model="selectByForm.totalAmount"
                placeholder="请输入查找总价"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="姓名" class="form-item">
            <el-input
                v-model="selectByForm.costName"
                placeholder="请输入购买者姓名"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 操作按钮（单独一行） -->
      <el-row>
        <el-col :span="24" class="form-actions">
          <el-button type="primary" @click="onSelect" icon="el-icon-search">查询</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!--  列表页  -->
    <el-table :data="tableData"
              style="width: 100%"
              :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
              stripe
              highlight-current-row
              @current-change="toShow"
              border
    >
      <el-table-column prop="used" label="土地作用" width="180" align="center"  ></el-table-column>
      <el-table-column prop="itemName" label="项目名称" width="180" align="center" ></el-table-column>
      <el-table-column prop="quantity" label="项目数量" width="180" align="center" ></el-table-column>
      <el-table-column prop="unitPrice" label="项目单价" width="180" align="center" ></el-table-column>
      <el-table-column prop="totalAmount" label="项目总支出" width="180" align="center" ></el-table-column>
      <el-table-column prop="costDate" label="支出时间" width="180" align="center" >
        <template slot-scope="scope">
          {{ scope.row.costDate ? scope.row.costDate.split('T')[0] : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="costName" label="支出人" width="180" align="center" ></el-table-column>

    </el-table>

    <!--    页脚-->
    <el-pagination
        background
        :page-size="pageSize"
        :current-page="pageNum"
        :page-count="pages"
        layout="prev, pager, next"
        :total="total"
        @current-change="changePageNum"
    >
    </el-pagination>

  </div>
</template>

<script>


import {getCostsPage} from "@/api/costs";


export default {
  data() {
    return {
      //筛选表单
      selectByForm: {
        used: '',
        itemName: '',
        totalAmount: '',
        costName: ''
      },
      //列表数据
      tableData: '',
      //页脚
      pages: 0,
      total: 1,
      pageNum: 1,
      pageSize: 6,
      //弹窗 默认值
      submitting: false,//按钮是否可使用
      costForm: {
        costId: '',
        used: '',
        itemName: '',
        quantity: 0,//数量
        unitPrice: 0,//单价
        totalAmount: 0,//总价格
        costName: ''
      },
      rules: {
        used: [
          {required: true, message: '请输入土地作用', trigger: 'blur'}
        ],
        itemName: [
          {required: true, message: '请输入费用项目名称', trigger: 'blur'}
        ],
        quantity: [
          {required: true, message: '请输入数量', trigger: 'blur'}
        ],
        unitPrice: [
          {required: true, message: '请输入单价', trigger: 'blur'}
        ]
      },
    };
  },
  methods: {


    onSelect() {
      this.pageNum = 1
      this.getPage()
    },

    //获取页面数据
    getPage() {
      getCostsPage(this.selectByForm, this.pageNum, this.pageSize).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list
          this.pages = res.data.pages
          this.total = res.data.total
          this.pageNum = res.data.pageNum
          this.pageSize = res.data.pageSize
        }
      })
    },
    //直接选择第几页
    changePageNum(v) {
      console.log(v + '')
      this.pageNum = v
      this.getPage()
    }
  },
  created() {
    this.getPage()
  }
}
</script>

<style scoped>
.form-actions {
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
}

/* 表单行样式 */
.form-row {
  margin-bottom: 15px;
}

/* 表单列样式 */
.form-col {
  margin-bottom: 10px;
  padding: 0 10px;
}

/* 表单项样式 */
.form-item {
  margin-bottom: 0;
}

/* 输入框样式 */
.form-input {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .form-col {
    padding: 0 5px;
  }
}

</style>

